<template>
  <div id="hover_con" v-show="seen" :style="positionStyle">
    <div id="header">AIT详情</div>
    <ul>
      <li v-for="(value,key) in AITDetail">
        <div class="group">
          <div class="key">{{key}} : </div>
          <div class="value">{{value}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "Hover",
    data() {
      return {
        AITDetail:{},
        seen:false,
        positionStyle:{top:'20px',left:'20px'},
      }
    },
    methods:{
      updateAITDetail(AITjson){
        this.AITDetail={"id":AITjson["id"],
          "taskid":AITjson["taskid"],
          "status":AITjson["status"],
          "battary":AITjson["battary"],
          "capacity":AITjson["capacity"]
        };
        console.log(this.AITDetail);
      },
      updateSeen(data){
        this.seen=data;
      },
      updatePositionStyle(x,y){
        this.positionStyle={top: y-50 + 'px',left: x+30 + 'px'};
      }
    }
  }
</script>

<style scoped>
  #hover_con{
    border:1px solid #c3c3c3;
    width: 300px;
    position: absolute;
    z-index:2;
    background: beige;
    opacity: 0.7;
    border-radius: .8em;
    padding: 2px;
    box-shadow: 0 0 0 .3em #655;
    outline: .3em solid #655;

  }
  #header{
    font-size: 20px;
    text-align:center;
  }
  li{

  }
  .group{
    display:flex;
    flex-direction: row;
  }
  .key{
    font-size: 15px;
    color: #000000;
    width:80px;
  }
  .value{
    font-size: 15px;
    color:black;
    text-align:center;
    width:150px;
  }
</style>
